<template>
  <div>
    <el-dialog ref="dialog" v-model="dialogVisible" title="完善个人信息" width="35%" :before-close="handleClose" center
      top="5vh">
      <el-form ref="ruleFormRef" style="max-width: 400px; width: 350px" :model="infoForm" :rules="rules"
        label-width="auto" class="demo-ruleForm" :size="formSize" :label-position="labelPosition" status-icon>
        <el-form-item label="年龄" prop="age">
          <!-- 需要循环一个数字作为展示 -->
          <el-select-v2 v-model="infoForm.age" placeholder="请选择您的年龄" :options="options" />
        </el-form-item>
        <el-form-item label="岗位" prop="desiredPosition">
          <!-- 需要做成点击弹窗选择 -->
          <el-input v-model="infoForm.desiredPosition" placeholder="请选择您的期望岗位" type="text" />
        </el-form-item>
        <el-form-item label="就业地区" prop="jobRegion">
          <!-- 需要做成点击弹窗选择 -->
          <el-input v-model="infoForm.jobRegion" placeholder="请选择您期望就业地区" type="text" />
        </el-form-item>
        <el-form-item label="学历程度" prop="education">
          <el-select v-model="infoForm.education" placeholder="请选择在读状态">
            <el-option label="专科" value="0" />
            <el-option label="本科" value="1" />
            <el-option label="研究生" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <!-- 需要做成点击弹窗选择 -->
          <el-input v-model="infoForm.major" placeholder="请选择您的专业" type="text" />
        </el-form-item>
        <el-form-item label="毕业院校" prop="school">
          <!-- 需要做成点击弹窗选择 -->
          <el-input v-model="infoForm.school" placeholder="请选择您的毕业院校" type="text" />
        </el-form-item>
        <el-form-item label="在读状态" prop="studyStatus">
          <el-select v-model="infoForm.studyStatus" placeholder="请选择在读状态">
            <el-option label="在校生" value="0" />
            <el-option label="应届毕业生" value="1" />
            <el-option label="已毕业" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="infoForm.gender">
            <el-radio value="0">男</el-radio>
            <el-radio value="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="薪资范围" required>
          <el-col :span="11">
            <el-form-item prop="minSalary">
              <el-select v-model="infoForm.minSalary" placeholder="最低薪资">
                <el-option label="1000" value="0" />
                <el-option label="应届毕业生" value="1" />
                <el-option label="10000" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500">&nbsp;-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="maxSalary">
              <el-select v-model="infoForm.maxSalary" placeholder="最高薪资">
                <el-option label="1000" value="0" />
                <el-option label="应届毕业生" value="1" />
                <el-option label="已毕业" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="infoForm.phone" placeholder="请选择您的联系电话" type="text" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
import {
  ComponentSize,
  FormInstance,
  FormRules,
  ElMessageBox,
  FormProps,
  ElMessage,
} from "element-plus";
import { useUserInfor } from "../stores/userInfo";


const resume = ref({
  age: '',
  desiredPosition: '',
  jobRegion: '',
  education: '',
  major: '',
  school: '',
  studyStatus: '',
  gender: '',
  phone: ''
});
const Data = ref(null);

const userStore = useUserInfor();

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("您确定关闭完善用户信息弹窗吗？")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

//表单
//表单对齐方式
const labelPosition = ref<FormProps["labelPosition"]>("left");
interface InfoForm {
  gender: number;
  phone: string;
  age: number;
  studyStatus: number;
  education: string;
  school: string;
  major: string;
  jobRegion: string;
  desiredPosition: string;
  minSalary: string;
  maxSalary: string;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const infoForm = reactive<InfoForm>({
  gender: null, //性别
  phone: "", //联系电话
  age: null, //年龄
  studyStatus: null, //在读状态(0-在校生，1-应届毕业生，2-已毕业)
  education: "",//用户学历
  school: "", //毕业院校
  major: "", //专业
  jobRegion: "", //就业地区
  desiredPosition: "", //岗位
  minSalary: "", //最低薪资
  maxSalary: "", //最高薪资
});

const locationOptions = ["Home", "Company", "School"];

const rules = reactive<FormRules<InfoForm>>({
  education: [
    { required: true, message: "请选择您的学历", trigger: "blur" },
  ],
  major: [
    { required: true, message: "请选择您的专业", trigger: "blur" },
  ],
  jobRegion: [
    { required: true, message: "请选择您的期望就业地区", trigger: "blur" },
  ],
  desiredPosition: [
    { required: true, message: "请选择您的期望岗位", trigger: "blur" },
  ],
  minSalary: [
    { required: true, message: "请选择您期望最低薪资", trigger: "blur" },
  ],
  maxSalary: [
    { required: true, message: "请选择您期望最高薪资", trigger: "blur" },
  ],
});

Object.entries(toRefs(userStore.userInfo)).forEach(([key, value]) => {
  infoForm[key] = value.value;
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      userStore.submitUserInfo(infoForm, dialogVisible);
    } else {
      ElMessage.error('请检查填写信息是否正确');
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 100 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

// 暴露打开弹窗方法
const open = () => {
  dialogVisible.value = true;
};

defineExpose({
  open,
});






</script>

<style lang="scss" scoped>
:deep(.el-dialog--center .el-dialog__body) {
  text-align: initial;
  display: flex;
  justify-content: center;
}
</style>
